<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div id="app">
<el-form :inline="true" class="demo-form-inline">
            <!-- 输入提示框 -->
              <el-form-item label="商品名称">
              <el-row class="demo-autocomplete">
			  <el-col>
			    <el-autocomplete
			      class="inline-input"
			      v-model="assessone.pname"
			      :fetch-suggestions="querySearch"
			      placeholder="请输入内容"
			    ></el-autocomplete>
			  </el-col>
              </el-form-item>
              
              <el-form-item label="商品编号">
                <el-input v-model="assessone.pid" placeholder="商品编号"></el-input>
              </el-form-item>
            
            
            <el-form-item label="评价类型">
              <el-select v-model="assessone.starnum" placeholder="打星">
              	<el-option label="全部" value="0"></el-option>
              	<el-option label="一星" value="1"></el-option>
                <el-option label="两星" value="2"></el-option>
                <el-option label="三星" value="3"></el-option>
                <el-option label="四星" value="4"></el-option>
                <el-option label="五星" value="5"></el-option>
              </el-select>
              
              <el-form-item label="订单编号">
                <el-input v-model="assessone.oid" placeholder="订单编号"></el-input>
              </el-form-item>
              
              <el-form-item>
              <div class="block">
               <span>时间间</span>
			    <el-date-picker
			    	@change="gettime"
			      v-model="assessone.value1"
			      value-format="yyyy-MM-dd hh:mm:ss"
			      type="daterange"
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期">
			    </el-date-picker>
			  </div>
              </el-form-item>
              
            <el-form-item>
              <el-button type="primary" @click="byassess(1)">查询</el-button>
            </el-form-item>
          </el-form>
          
          <!-- 表格 -->
          <el-table
	      :data="assess"
	      border
	      style="width: 100%">
	      <el-table-column
	        label="评价内容"
	        align="center">
	        <template slot-scope="scope">
            <span>{{ scope.row.valtext }}</span><br/>
            <span>{{ scope.row.pvaltime }}</span>
          </template>
	      </el-table-column>
	      
	      <el-table-column
	        prop="pname"
	        label="被评商品"
	        align="center">
	      </el-table-column>
	      
	      <el-table-column
	        label="评价类型" align="center" width="150">
	        <template slot-scope="scope">
            <span v-if="scope.row.starnum == 1">一星</span>
            <span v-if="scope.row.starnum == 2">两星</span>
            <span v-if="scope.row.starnum == 3">三星</span>
            <span v-if="scope.row.starnum == 4">四星</span>
            <span v-if="scope.row.starnum == 5">五星</span>
          </template>
	      </el-table-column>
	      
	      <el-table-column
	        prop="uname"
	        label="评价人" width="150" align="center">
	      </el-table-column>
	      
	      <el-table-column
	        prop=""
	        label="订单编号" width="150" align="center">
	      </el-table-column>
	    </el-table>
	    
	    <!--页码-->
        <br/>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage4"
		      :page-sizes="[10,20,30,40,50]"
		      :page-size="pagesize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
          </el-pagination>
        </div>
  
</div>
<script src="../../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../../js/axios.js"></script>
<script src="../../js/qs.js"></script>
<script>
let app = new Vue({
	el: '#app',
	data: {
		assessone:{
			pname:'',
			pid:'',
			starnum:'0',
			oid:'',
			value1: '',//时间
			start:"",//开始时间
		    end: "",//结束时间
		},
		assess:[],//评论信息
		restaurants: [],//关键字提醒
		searchone:[],//存取搜索数据
		currentPage4: 1,	//当前所在的页
	      total:0,			//总数
	      pagesize:10,		//每页数量
	      a:[]
	},
	methods: {
		//条件查询
		byassess(val){
			//存取临时变量
			this.currentPage4 = val;
			this.searchone = this.assessone;
			axios.post("../../pvalController/byassess", qs.stringify({
				currentPage4: this.currentPage4,
	    		pagesize: this.pagesize,
				pname:this.searchone.pname,
				pid:this.searchone.pid,
				starnum:this.searchone.starnum,
				oid:this.searchone.oid,
				start:this.searchone.start,
				end:this.searchone.end
			})).then(resp=>{
				this.assess = resp.data;
				if(resp.data.length > 0){
	    			this.total = Number(this.assess[0].count);
	    		}else{
	    			this.total = 0;
	    		}
			});
		},
		//获取评论信息
		getassess(){
			this.byassess(1);
			axios.get("../../pvalController/getassess").then(resp=>{
				this.a = resp.data;
				this.restaurants = this.a;
			});
		},
		//时间设置
		gettime(value1) {
		      //定义开始结束时间
		      if (value1 != null) {
		    	  this.assessone.start = value1[0];
		    	  this.assessone.end = value1[1];
		      }else{
		    	  this.assessone.start ='';
		    	  this.assessone.end ='';
		      }
		    },
	  //返回输入建议的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据，这些数据就是输入建议的数据
      querySearch(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
              return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
          },
        //每页展示数据条数的调整
  		handleSizeChange(val) {
  			//变化每页值的数量
  			this.pagesize = val;
  			this.byassess(1);
  	      },
  	      //控制页面的跳转
  	    handleCurrentChange(val) {
  	    	  this.byassess(val);
  	      },
	},
	created(){
		//获取评论信息
		this.getassess();
	},
	computed: {
		
	}
});
</script>
</body>
</html>